<!-- 超级管理员宿舍楼概览 -->
<template>
  <div class="overview-container">
    <Card>
      <template #one="{ data }">
        <div class="icon people" @click="housemaster(data)">
          <Icon type="account"></Icon>
        </div>
      </template>
      <template #three="{ data }">
        <div class="icon del" @click="del(data)">
          <Icon type="delete"></Icon>
        </div>
      </template>
    </Card>
    <AddAndUpdataHousemaster
      :dormitoryInfo="dormitoryInfoRef"
      :isAddAndUpdataDialog="isAddAndUpdataDialog"
      @closeDialog="closeDialog"
    ></AddAndUpdataHousemaster>
  </div>
</template>

<script setup>
import Card from "../../components/Card.vue";
import Icon from "@/components/Icon/index.vue";
import AddAndUpdataHousemaster from "./AddAndUpdataHousemaster.vue";
import { getDormitory, delDormitory } from "@/api/dormitoryInfo.js";
import { useUserStore } from "@/store/useUserStore.js";
import { ref } from "vue";
const { getUserInfo } = useUserStore();
const dormitoryInfoRef = ref(null); // 宿舍信息
const isAddAndUpdataDialog = ref(false); // 添加或修改管理员的对话框是否打开
const housemaster = (data) => {
  dormitoryInfoRef.value = data;
  isAddAndUpdataDialog.value = true;
};
const closeDialog = () => {
  isAddAndUpdataDialog.value = false;
};
const del = async (item) => {
  const { data } = await getDormitory(item.id);
  if (data[0].AdminInfon || item.dormitoryresided) {
    ElMessage.error("请清除管理员和入住学生");
    return;
  }
  const res = await delDormitory(item.id);
  if (res.data) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    await getUserInfo();
  }
};
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.icon {
  padding: 10px 10px;
  border-radius: 50%;
  transform: translate(10px, -10px);
  cursor: pointer;
  position: relative;
  &.people {
    background: #ffba00;
  }
  &.clean {
    background-color: #909399;
  }
  &.del {
    background-color: #ff4949;
  }
}
.icon-container {
  color: @white;
}
</style>